import { Button, Table, Form, Input, Select, Space } from "antd";
import { getUserList } from "@/api";
import { fomratDate } from "@/utils/index";
import type { User, Pagination } from "@/types/api";
import type { ColumnsType } from "antd/es/table";
import useQueryTable from "@/hook/useQueryTable";

export default function UserList() {
    const [form] = Form.useForm();
    const { tableProps, search } = useQueryTable({
        fetchPage: async (pagination: Pagination.paginationProps) => {
            const params = {
                pageSize: pagination.pageSize,
                pageNum: pagination.current,
                ...form.getFieldsValue(),
            };
            const data = await getUserList(params);
            const list = Array.from({ length: 50 })
                .fill({})
                .map((item: any) => {
                    item = { ...data.list[0] };
                    item.userId = Math.random();
                    return item;
                });
            data.list = list;
            data.page.total = list.length;
            return data;
        },
    });

    const columns: ColumnsType<User.UserItem> = [
        {
            title: "用户ID",
            dataIndex: "userId",
            key: "userId",
        },
        {
            title: "用户名称",
            dataIndex: "userName",
            key: "userName",
        },
        {
            title: "用户邮箱",
            dataIndex: "userEmail",
            key: "userEmail",
        },
        {
            title: "用户角色",
            dataIndex: "role",
            key: "role",
            render: (role: number) => {
                return {
                    0: "超级管理员",
                    1: "管理员",
                    2: "体验管理员",
                    3: "普通用户",
                }[role];
            },
        },
        {
            title: "用户状态",
            dataIndex: "state",
            key: "state",
            render: (state: number) => {
                return {
                    1: "在职",
                    2: "离职",
                    3: "试用期",
                }[state];
            },
        },
        {
            title: "注册时间",
            dataIndex: "createTime",
            key: "createTime",
            render: (createTime: string) => {
                return fomratDate(createTime);
            },
        },
        {
            title: "操作",
            dataIndex: "address",
            key: "address",
            render: () => {
                return (
                    <Space>
                        <Button type="text">编辑</Button>
                        <Button type="text" danger>
                            删除
                        </Button>
                    </Space>
                );
            },
        },
    ];
    const resert = () => {
        form.resetFields();
        search();
    };
    return (
        <div className="user-list">
            <Form className="search-form" layout="inline" form={form} initialValues={{ state: "0" }}>
                <Form.Item name="userId" label="用户ID">
                    <Input placeholder="请输入用户ID" />
                </Form.Item>
                <Form.Item name="userName" label="用户名称">
                    <Input placeholder="请输入用户名称" />
                </Form.Item>
                <Form.Item name="state" label="状态">
                    <Select
                        style={{ width: 120 }}
                        options={[
                            { value: "0", label: "所有" },
                            { value: "1", label: "在职" },
                            { value: "2", label: "试用期" },
                            { value: "3", label: "离职" },
                        ]}></Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" onClick={search}>
                            查询
                        </Button>
                        <Button type="default" onClick={resert}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <div className="base-table">
                <div className="header-wrapper">
                    <div className="title">用户列表</div>
                    <div className="action">
                        <Button type="primary">新增</Button>
                        <Button type="primary" danger>
                            批量删除
                        </Button>
                    </div>
                </div>
                <Table bordered rowSelection={{ type: "checkbox" }} rowKey={row => row.userId} {...tableProps} columns={columns} />
            </div>
        </div>
    );
}
